<script>
import { Search, Plus } from '@element-plus/icons-vue'
import { selectDepartList, deleteDepartList } from '@/api/admin/depart.js'
import AddDepartDialog from './dialog/AdminDepart/AddDepartDialog.vue'
import EditDepartDialog from './dialog/AdminDepart/EditDepartDialog.vue'
export default {
  components: {
    Search,
    Plus,
    AddDepartDialog,
    EditDepartDialog,
  },
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        department_name: '',
        query: '',
      },
      total: 0,
      list: [],
      isShowAdd: false,
      isShowEdit: false,
    }
  },
  methods: {
    resetParamsAndLoad() {
      this.params.pageNo = 1
      this.loadDepartList()
    },
    async loadDepartList() {
      let { total, list } = await selectDepartList(this.params)
      this.total = total
      this.list = list
    },
    async removeDepartById(department_id) {
      await deleteDepartList({ department_id })
      await this.loadDepartList()
    },
    async openEditDailog(row) {
      this.$refs.editDialog.setDefaultForm({ ...row })
      this.isShowEdit = true
    },
  },
  created() {
    this.loadDepartList()
  },
}
</script>

<template>
  <div class="title">
    <div class="title-left">
      <el-input placeholder="系名关键字" size="small" clearable v-model="params.query"></el-input>
      <el-button type="primary" size="small" @click="resetParamsAndLoad">
        <el-icon><Search></Search></el-icon>
        <span>查询</span>
      </el-button>
    </div>
    <el-button type="success" size="small" @click="isShowAdd = true">
      <el-icon><Plus></Plus></el-icon>
      <span>新增</span>
    </el-button>
  </div>
  <el-table border :data="list">
    <el-table-column label="序号" type="index" width="60px"></el-table-column>
    <el-table-column label="系名" prop="department_name"></el-table-column>
    <el-table-column label="专业数" prop="major_count"></el-table-column>
    <el-table-column label="教师数" prop="teacher_count"></el-table-column>
    <el-table-column label="操作" width="120" #default="{ row }">
      <el-button type="primary" size="small" link @click="openEditDailog(row)">编辑</el-button>
      <el-popconfirm
        title="是否删除当前课程"
        #reference
        @confirm="removeDepartById(row.department_id)"
      >
        <el-button type="danger" size="small" link>删除</el-button>
      </el-popconfirm>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:page-size="params.pageSize"
    v-model:current-page="params.pageNo"
    :page-sizes="[2, 5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    background
    size="small"
    :total="total"
    @change="loadDepartList"
  >
  </el-pagination>

  <AddDepartDialog v-model="isShowAdd" @resetData="loadDepartList"></AddDepartDialog>
  <EditDepartDialog
    v-model="isShowEdit"
    @resetData="loadDepartList"
    ref="editDialog"
  ></EditDepartDialog>
</template>

<style scoped>
.title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.title-left {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.title-left .el-input {
  margin-right: 10px;
}

.el-table {
  margin-top: 16px;
}

.el-pagination {
  margin-top: 16px;
  justify-content: center;
}
</style>
